<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 530px;
            text-align: center;
        }
        
        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;
        }
        
        .grid th,
        td {
            padding: 10;
            border: 1px dashed #F3DCAB;
            height: 35px;
            line-height: 35px;
        }
        
        .grid th {
            background-color: #F3DCAB;
        }
        
        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }
        
        .grid .total {
            height: 30px;
            line-height: 30px;
            background-color: #F3DCAB;
            border-top: 1px solid #C2D89A;
        }
    </style>
    </style>
</head>

<body>
    <div id="app">
        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                    <div>
                        <label for="id">
                      编号：
                    </label>
                        <!-- disabled前面记得要绑定v-bind: -->
                        <input type="text" id="id" v-model='id' v-bind:disabled='true' v-focus>
                        <label for="name">
                      名称：
                    </label>
                        <input type="text" id="name" v-model='name'>
                        <button @click='subAdd' :disabled='subFlag'>提交</button>
                    </div>
                </div>
            </div>
            <div class="total">
                <span>图书总数：</span>
                <span>{{total}}</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 遍历books这个数组 将里面的数据更新到视图 -->
                    <tr v-for='(item,index) in books' :key='index '>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                        <td>
                            <a href="" v-on:click.prevent='changeBook(item.id)'>修改</a>
                            <span>|</span>
                            <a href="" v-on:click.prevent='deleteBook(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script type="text/javascript">
        // 配置一个全局的协议域名端口
        axios.defaults.baseURL = 'http://localhost:3000'
            // 设置响应拦截器
        axios.interceptors.response.use(function(response) {
            // 对响应数据做点什么
            // response 是请求回来的数据
            var res = response.data
            return res;
        }, function(error) {
            // 对响应错误做点什么
            return Promise.reject(error)
        })
        Vue.directive('focus', {
            inserted: function(el) {
                el.focus();
            },
        });
        Vue.filter('format', function(value, arg) {
            function dateFormat(date, format) {
                if (typeof date === 'string') {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                        date = parseInt(mts[2]);
                    }
                }
                date = new Date(date);
                if (!date || date.toUTCString() == 'Invalid Date') {
                    return '';
                }
                var map = {
                    M: date.getMonth() + 1, //月份
                    d: date.getDate(), //日
                    h: date.getHours(), //小时
                    m: date.getMinutes(), //分
                    s: date.getSeconds(), //秒
                    q: Math.floor((date.getMonth() + 3) / 3), //季度
                    S: date.getMilliseconds(), //毫秒
                };

                format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                        if (all.length > 1) {
                            v = '0' + v;
                            v = v.substr(v.length - 2);
                        }
                        return v;
                    } else if (t === 'y') {
                        return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                });
                return format;
            }
            return dateFormat(value, arg);
        });
        var vm = new Vue({
            el: '#app',
            data: {
                subFlag: false,
                isFlag: false,
                id: '',
                name: '',
                books: []
            },
            methods: {
                // 添加图书
                // data数据定义id为空 name为空 然后双向绑定input输入框的文本域 
                // 声明一个变量book 点击提交按钮时 将输入框的数据 赋值给id name 并放在变量book 最后用数组方法添加到books里
                subAdd: async function() {
                    // 这里做一个判断 如果编号输入禁用了 说明就要进行修改操作
                    // 没有禁用就进行添加图书操作
                    if (this.isFlag) {
                        // 修改操作
                        // 这里使用箭头函数  因为普通函数this指向window 箭头函数的this指向也就是父级subAdd的this指向 就是vue这个实例对象
                        var res = await axios.put(`/books/${this.id}`, {
                                name: this.name
                            })
                            // console.log(res);
                        if (res.status === 200) {
                            this.queryData()
                        }

                        // 修改完后 将禁用取消 
                        this.isFlag = false


                    } else {
                        // 如果输入框没被禁用 则执行添加图书操作
                        var res = await axios.post('/books', {
                                name: this.name
                            })
                            // console.log(res);// status=200
                        if (res.status === 200) {
                            this.queryData()
                        }

                        // 清空输入框
                        this.id = ''
                        this.name = ''
                    }
                    // 清空输入框
                    this.id = ''
                    this.name = ''

                },
                changeBook: async function(id) {
                    // 当点击修改时 编号输入框禁用
                    this.isFlag = true;
                    // 这里的id形参 是从上面函数调用传的实参item.id
                    // 修改功能 通过id修改对应的图书名
                    // console.log(id);
                    // 用filter过滤对应id的图书信息  并返回books数组中的其中一个符合条件的对象 用变量book接收
                    var res = await axios.get(`/books/${id}`)
                        // console.log(res);{name: "西游记", date: 2525609975000, id: 7}
                    this.name = res.name
                    this.id = res.id

                },
                deleteBook: async function(id) {
                    var res = await axios.delete(`/books/${id}`)
                        // console.log(res);
                    if (res.status === 200) {
                        this.queryData()
                    }
                },
                queryData: async function() {
                    // 图书列表数据加载
                    var res = await axios.get('/books')
                        // console.log(res);
                        // 将获取到的数据赋值给books
                    this.books = res

                }

            },
            // 计算属性是把插值表达式中的计算逻辑写到computed中 并返回出去 更新到视图中{{total}}
            computed: {
                total: function() {
                    return this.books.length
                }
            },
            watch: {
                name: async function(val) {
                    var res = await axios.get(`/books/book/${val}`)
                        // console.log(res);
                    if (res.status === 1) {
                        this.subFlag = true
                    } else {
                        this.subFlag = false
                    }
                }
            },
            // ajax请求的数据放在mounted中
            mounted: function() {
                this.queryData()
            }
        });
    </script>
</body>

</html>